{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>看板</li>
  </ol>
<section class="demo-section">
<div id="pageContent">




<article><p>看板管理多个容器及子条目，允许用户通过拖拽为字条目排序，并将条目从一个容器拖动到另一个容器。</p><p>拖动时会在文档中插入被拖动元素的<strong>影子元素</strong>，会跟随鼠标光标位置，用于指示当前拖动的位置。</p><div class="alert alert-danger">
  <h4>不兼容触摸屏</h4>
  <p>看板无法在触摸屏上完成拖拽功能。</p>
</div></article>







<script src="__ZUI__/lib/board/zui.board.js"></script>

<script>
$(function(){
	afterPageLoad();
});
function afterPageLoad() {
  if($.fn.boards) $('#pageContent .boards').boards({drop: function(e){
    $.zui.messager.show(e.element.text() + " 拖放到 " + e.target.closest('.board').find('.panel-heading').text());
  }});
}
</script>

<style>
.board-item.drag-shadow {z-index: 9999}
</style>




<section><header><h3>综合示例</h3></header><article><h4>引入资源</h4><p>看板为独立组件，你需要从本地或 CDN 单独引入 lib 目录下的资源：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"lib/board/zui.board.min.css"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"lib/board/zui.board.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span></code></pre><h4>示例</h4><p>使用鼠标来拖拽项目。</p><div class="margin-zero example">
  <div class="boards" id="myBoard">
    <div class="board panel panel-primary" data-id="board1">
      <div class="panel-heading">
        <strong>未完成</strong>
      </div>
      <div class="panel-body">
        <div class="board-list">
          <div class="board-item" data-id="board2">测试</div>
          <div class="board-item" data-id="board3">发布</div>
          <div class="board-item" data-id="board4">庆祝</div>
          <div class="disable-drop board-item">不可拖拽</div>
        <div class="board-item board-item-empty"><i class="icon-plus"></i> 移动到末尾</div><div class="board-item board-item-shadow"></div></div>
      </div>
    </div>
    <div class="board panel panel-warning" data-id="board5">
      <div class="panel-heading">
        <strong>进行中</strong>
      </div>
      <div class="panel-body">
        <div class="board-list">
          <div class="board-item" data-id="board6">设计界面</div>
          <div class="board-item" data-id="board7">撰写文档</div>
          <div class="board-item" data-id="board8">紧急的任务</div>
        <div class="board-item board-item-empty"><i class="icon-plus"></i> 移动到末尾</div><div class="board-item board-item-shadow"></div></div>
      </div>
    </div>
    <div class="board panel panel-success" data-id="board9">
      <div class="panel-heading">
        <strong>已完成</strong>
      </div>
      <div class="panel-body">
        <div class="board-list">
          <div class="board-item" data-id="board10">初步设计</div>
          <div class="board-item" data-id="board11">数据库设计</div>
          <div class="board-item" data-id="board12">需求整理</div>
        <div class="board-item board-item-empty"><i class="icon-plus"></i> 移动到末尾</div><div class="board-item board-item-shadow"></div></div>
      </div>
    </div>
  </div>
</div><link href="__ZUI__/lib/board/zui.board.css" rel="stylesheet"><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="com">&lt;!-- 使用 .boards 类来管理多个 .board --&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"boards"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myBoards"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="com">&lt;!-- .board 为单个容器 --&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board panel"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-heading"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;strong&gt;</span><span class="pln">未完成</span><span class="tag">&lt;/strong&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-body"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board-list"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="com">&lt;!-- 使用 .board-item 来标识可以操作的条目 --&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board-item"</span><span class="tag">&gt;</span><span class="pln">测试</span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board-item"</span><span class="tag">&gt;</span><span class="pln">发布</span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board-item"</span><span class="tag">&gt;</span><span class="pln">庆祝</span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="com">&lt;!-- 为 .board-item 添加 .disabled-dorp 类来禁止移动此条目 --&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"disable-drop board-item"</span><span class="tag">&gt;</span><span class="pln">不可拖拽</span><span class="tag">&lt;/div&gt;</span><span class="pln">
      </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board panel"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-heading"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;strong&gt;</span><span class="pln">进行中</span><span class="tag">&lt;/strong&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-body"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board-list"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board-item"</span><span class="tag">&gt;</span><span class="pln">设计界面</span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board-item"</span><span class="tag">&gt;</span><span class="pln">撰写文档</span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board-item"</span><span class="tag">&gt;</span><span class="pln">紧急的任务</span><span class="tag">&lt;/div&gt;</span><span class="pln">
      </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board panel"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-heading"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;strong&gt;</span><span class="pln">已完成</span><span class="tag">&lt;/strong&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"panel-body"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board-list"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board-item"</span><span class="tag">&gt;</span><span class="pln">初步设计</span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board-item"</span><span class="tag">&gt;</span><span class="pln">数据库设计</span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board-item"</span><span class="tag">&gt;</span><span class="pln">需求整理</span><span class="tag">&lt;/div&gt;</span><span class="pln">
      </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-css"><span class="com">/* 保证影子元素一直可见 */</span><span class="pln">
</span><span class="pun">.</span><span class="pln">board</span><span class="pun">-</span><span class="pln">item</span><span class="pun">.</span><span class="pln">drag</span><span class="pun">-</span><span class="pln">shadow </span><span class="pun">{</span><span class="pln">z</span><span class="pun">-</span><span class="pln">index</span><span class="pun">:</span><span class="pln"> </span><span class="lit">9999</span><span class="pun">}</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#myBoards'</span><span class="pun">).</span><span class="pln">boards</span><span class="pun">({</span><span class="pln">
    drop</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">){</span><span class="pln">
        $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="pln">messager</span><span class="pun">.</span><span class="pln">show</span><span class="pun">(</span><span class="pln">e</span><span class="pun">.</span><span class="pln">element</span><span class="pun">.</span><span class="pln">text</span><span class="pun">()</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">" 拖放到 "</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">target</span><span class="pun">.</span><span class="pln">closest</span><span class="pun">(</span><span class="str">'.board'</span><span class="pun">).</span><span class="pln">find</span><span class="pun">(</span><span class="str">'.panel-heading'</span><span class="pun">).</span><span class="pln">text</span><span class="pun">());</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre></article></section>





<section><header><h3>HTML 结构</h3></header><article><p>为了使得看板交互正常工作，看板使用特定的 CSS 类来标识特定元素，一般情况下看板的 HTML 结构如下：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"boards"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board-list"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board-item"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board-item"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board-item"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span><span class="pln">
      ...
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"board"</span><span class="tag">&gt;</span><span class="pln">
    ...
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/div&gt;</span></code></pre><p>特殊类说明：</p><ul>
<li><code>.boards</code>：看板顶层容器；</li>
<li><code>.board</code>：标识一个看板容器，应作为 <code>.boards</code> 的直接子元素或子元素的后代元素；</li>
<li><code>.board-list</code>：看板列表容器，应作为 <code>.board</code> 的直接子元素或子元素的后代元素；</li>
<li><code>.board-item</code>：看板列表条目，必须为 <code>.board-list</code> 的直接子元素；</li>
<li><code>.disable-drop</code>：为 <code>.board-item</code> 添加 <code>.disable-drop</code> 类来禁用此列表条目被拖动；</li>
<li><code>.board-item-shadow</code>：当拖动时由程序动态生成的被拖动看板列表条目的影子元素，为 <code>.board-list</code> 的直接子元素。</li>
</ul><p>只要保证各个特殊类的层级关系，你可以自由定制自己的看板结构。</p></article></section>





<section><header><h3>选项</h3></header><article><p>在进行初始化时允许传入一个对象参数作为初始化选项。可以使用的选项如下：</p><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th>选项</th>
      <th>名称</th>
      <th>可选值</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>lang</code></td>
      <td>界面语言</td>
      <td>
        <ul>
          <li><code>null</code>（默认）</li>
          <li><code>'zh-cn'</code></li>
          <li><code>'zh-tw'</code></li>
          <li><code>'en'</code></li>
        </ul>
      </td>
      <td>指定界面所使用的语言，如果设置为 <code>null</code>，则会自动根据 <code>&lt;html&gt;</code> 元素上的 <code>[lang]</code> 属性来判断语言。</td>
    </tr>
    <tr>
      <td><code>langs</code></td>
      <td>设定界面各种语言文本</td>
      <td>默认为：<pre class="prettyprint prettyprinted" style=""><code><span class="pun">{</span><span class="pln">
    </span><span class="str">'zh_cn'</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        append2end</span><span class="pun">:</span><span class="pln"> </span><span class="str">'移动到末尾'</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    </span><span class="str">'zh_tw'</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        append2end</span><span class="pun">:</span><span class="pln"> </span><span class="str">'移动到末尾'</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    </span><span class="str">'en'</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        append2end</span><span class="pun">:</span><span class="pln"> </span><span class="str">'Move to the end.'</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code></pre></td>
      <td>使用此选项来自定义语言。</td>
    </tr>
    <tr>
      <td><code>before</code></td>
      <td>拖动前回调函数</td>
      <td>默认不设置</td>
      <td>指定一个回调函数在拖动发生前（<code>mousedown</code> 事件发生时）调用，在此回调函数中返回 <code>false</code> 来取消此次拖动操作。</td>
    </tr>
    <tr>
      <td><code>drop</code></td>
      <td>拖动并有效放置的回调函数</td>
      <td>默认不设置</td>
      <td>指定一个回调函数在完成移动目标元素时前（<code>mouseup</code> 事件发生时）并且已经将目标元素拖动到有效的可放置元素上时调用。</td>
    </tr>
    <tr>
      <td><code>droppable</code></td>
      <td>设定拖放插件选项</td>
      <td>默认不设置</td>
      <td>指定一个选项来重新设置 <a href="#javascript/droppable"><strong>插件 → 拖放</strong></a> 的选项。</td>
    </tr>
  </tbody>
</table></div><p>使用选项：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 定义选项对象</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> options </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    drop</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'成功拖到目标：'</span><span class="pun">,</span><span class="pln"> e</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    </span><span class="com">// 设置更多选项...</span><span class="pln">
</span><span class="pun">};</span><span class="pln">

</span><span class="com">// 初始化时传入选项参数</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myBoards'</span><span class="pun">).</span><span class="pln">boards</span><span class="pun">(</span><span class="pln">options</span><span class="pun">)</span></code></pre></article></section>












<section><header><h3>处理看板交互过程</h3></header><article><p>使用选项 <code>before</code> 和 <code>drop</code> 的回调函数来处理看板的交互过程。</p><h4><span class="code">before(e)</span></h4><p><code>before(e)</code> 回调函数在拖动发生之前调用，用于处理拖动前的操作或者决定取消后续的拖动事件，该回调函数参数 <code>e</code> 包含的属性定义如下：</p><ul>
<li><code>e.event</code>：鼠标按下时 <code>mousedown</code> 事件参数对象；</li>
<li><code>e.element</code>：被拖动元素。</li>
</ul><p>在该回调函数中返回 <code>false</code> 会取消这次拖动操作，后续相关事件也不会发生。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#dragBtn'</span><span class="pun">).</span><span class="pln">draggable</span><span class="pun">({</span><span class="pln">
    before</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'现在不是拖动的好时机，取消这次拖动操作。'</span><span class="pun">);</span><span class="pln">

        </span><span class="com">// 通过返回 false 来取消这次拖动操作</span><span class="pln">
        </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">})</span></code></pre><h4><span class="code">drop(e)</span></h4><p><code>drop(e)</code> 拖动完成时被调用。该回调函数参数 <code>e</code> 包含的属性定义如下：</p><ul>
<li><code>e.event</code>：鼠标移动时 <code>mousemove</code> 事件参数对象；</li>
<li><code>e.element</code>：被拖动元素；</li>
<li><code>e.target</code>：如果现在已经被拖到一个可放置的目标元素，则该属性指示该可放置的元素，否则值为 <code>null</code>；</li>
<li><code>e.position</code>：被拖动元素当前相对父级容器（<code>container</code> 指定）的位置；</li>
<li><code>e.offset</code>：被拖动元素当前相对于开始拖动时的位置变化；</li>
<li><code>e.mouseOffset</code>：当前光标位置相对于当前相对父级容器（<code>container</code> 指定）的位置；</li>
<li><code>e.clickOffset</code>：当鼠标按下时相对于被拖动元素左上角的位置；</li>
<li><code>e.isIn</code>：指示当前被拖动位置是否已经被拖到其中一个可放置元素上；</li>
<li><code>e.isNew</code>：指示被拖动元素相对于拖动之前的位置是否被拖到一个新的可放置元素上；</li>
<li><code>e.selfTarget</code>：指示当前是否拖到自身所在的位置。</li>
</ul><h4><span class="code">droppable</span></h4><p>看板的拖放实现使用的 <a href="#javascript/droppable"><strong>插件 → 拖放</strong></a>。你可以使用 <code>droppable</code> 选项来重新设定该插件选项。拖放插件选项定义及用法参见拖放插件文档。</p><p><code>droppable</code> 选项中的以下选项不应该被设定，因为这些选项由看板来接管，如果覆盖后可能会导致看板交互无法正常工作的问题：</p><ul>
<li><code>start</code></li>
<li><code>drag</code></li>
<li><code>drop</code></li>
<li><code>finish</code></li>
<li><code>target</code></li>
</ul></article></section></div>


</section>
{/block}